<template>
  <div class="Index">
    <el-container>
      <el-header>
        <h1>怀化热水系统</h1>
      </el-header>
      <el-main>
        <el-row>
          <el-col :span="24">
            <div class="grid-content">
              <el-button @click="sixsubButton">6栋子系统</el-button>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div class="grid-content">
              <el-button>5栋子系统</el-button>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div class="grid-content">
              <el-button>1-2栋子系统</el-button>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div class="grid-content">
              <el-button>3-4栋子系统</el-button>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div class="grid-content">
              <el-button>7栋子系统</el-button>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="24">
            <div class="grid-content">
              <el-button>8栋子系统</el-button>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="24">
            <div class="grid-content">
              <el-button @click="allwaterstatuButton">所有水表状态</el-button>
            </div>
          </el-col>
        </el-row>
      </el-main>
    </el-container>
  </div>
</template>

<script src="../assets/js/index.js"></script>

<style lang="scss">
.Index {
  > .el-container {
    font-family: "Avenir", Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    height: 100vh;
    .el-main {
      //background-color: #e9eef3;
      color: #333;
      line-height: 60px;
      padding:40px;
      > .el-row {
        margin-bottom: 20px;
        &:last-child {
          margin-bottom: 0;
        }
        > .el-col {
          .grid-content {
            .el-button {
              width: 100%;
              height: 60px;
              border: 1px solid #ffffff;
              border-radius: 10px;
              color: rgb(51, 51, 51);
              text-align: left;
              font-family: ".PingFang SC";
              font-size: 16px;
              font-weight: normal;
              line-height: 36px;
              white-space: pre-wrap;
            }
          }
        }
      }
    }
    .el-header {
      //background-color: #b3c0d1;
      color: #333;
      text-align: center;
      line-height: 25px;
      h1 {
        height: 36px;
        font-family: ".PingFang SC";
        font-size: 24px;
        font-weight: normal;
        color: rgb(255, 255, 255);
        line-height: 36px;
        text-align: center;
        white-space: pre-wrap;
        color: rgb(255, 255, 255);
      }
    }
  }
}
</style>>